<template>
    <div class="login">
    <img :src="imgSrc" width="100%" height="100%" alt="" />
  <div class="loginPart">
    <h2>人事管理系统</h2>
  <el-form
                  :rules="rules"
                  ref="loginForm"
                  v-loading="loading"
                  element-loading-text="正在登录..."
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.8)"
                  :model="loginForm"
                  class="loginContainer">
    <div class="inputElement" prop="id">
      <el-input v-model="loginForm.id" type="text" placeholder="请输入用户名/手机号 "></el-input>
    </div>
    <div class="inputElement" prop="password">
      <el-input v-model="loginForm.password" type="text" placeholder="请输入密码 "></el-input>
    </div>
    <!-- <tr>
                  <td class="login-title" style="justify-content: center">
                    身份
                  </td>
                  <td>
                    <el-radio v-model="type" :label="1" border>总裁</el-radio>
                    <el-radio v-model="type" :label="2" border>主管</el-radio>
                    <el-radio v-model="type" :label="3" border>员工</el-radio>
                  </td>
                </tr> -->
                <Vcode :show="isShow" @success="success" @close="close"></Vcode>
      <el-button-group style="width: 100%">
                  <el-button size="normal" type="danger"  style=" width: 50%;" @click="submit" :round="true" :disabled="right" >人机验证</el-button>
                  <el-button size="normal" type="primary" style="width: 50%;" @click="submitLogin" :round="true" :disabled="!right">登录</el-button>
                </el-button-group>
  </el-form>
  </div>
  </div>
</template>

<script>

import {Message} from "element-ui";
import Vcode from 'vue-puzzle-vcode'
    export default {
      name:"Login_in",
      data() {
      return {
        //imgSrc: url("../assets/images/demo6.jpeg"),
        imgSrc: require("../assets/images/demo6.jpeg"),
        isShow : false,
        right : false,
        dialogAddVisible : false,
        post_type_options : [],
        bannerHeight : "",
        loading: false,
        type: 1,
        vcUrl: '/verifyCode?time='+new Date(),
        loginForm: {
          id: '',
          password: '',
         // employee_type: localStorage.getItem("role"),
        },
      checked: true,
      rules: {
        id: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}],
        code: [{required: true, message: '请输入验证码', trigger: 'blur'}]
      }
    }
 },
 components : {
  Vcode
 },
//  created(){
//   this.loginForm.employee_type = this.type
//  },
 mounted(){
  window.addEventListener('resize',() => {
      this.bannerHeight=this.$refs.bannerHeight[0].hight;
      this.imgLoad();
    },false)
    this.initDepartment();
    this.initPost();
 },
 methods: {
  updateVerifyCode() {
      this.vcUrl = '/verifyCode?time='+new Date();
    },
  submit() {
    this.isShow = true;
  },
  submitLogin() {
    this.get_account()
    this.$refs.loginForm.validate(valid => {
        if (valid) {
           this.$axios.post('/Login', this.loginForm).then((response => {
            this.loading = false;
            const _this = this;
            console.log("resp = ",response.data)
            if(response) {
                if (response.data.msg == "登录成功") {
                    console.log("200")
                    this.$router.push({ path: '/home'})
                } else {
                    alert('用户名或密码错误')
                    return false
                }
            }
           }))
        } else {
            alert('未填写完整！！！')
            return false
        }
    })
    },

  success() {
    this.isShow = false;
    this.right = true;
  },
  close() {
    this.isShow = false;
    this.right = false
  }
 }
}
</script>
<style>
    .loginPart{
    position:absolute;
    /*定位方式绝对定位absolute*/
    top:50%;
    left:50%;
    /*顶和高同时设置50%实现的是同时水平垂直居中效果*/
    transform:translate(-50%,-50%);
    /*实现块元素百分比下居中*/
    width:450px;
    padding:50px;
    background: #DCE5EC;
    /*背景颜色为黑色，透明度为0.8*/
    box-sizing:border-box;
    /*box-sizing设置盒子模型的解析模式为怪异盒模型，
    将border和padding划归到width范围内*/
    box-shadow: 0px 15px 25px rgba(0,0,0,.5);
    /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
    border-radius:15px;
    /*边框圆角，四个角均为15px*/
  }
  .loginPart h2{
    margin:0 0 30px;
    padding:0;
    color: #5A7A93;
    text-align:center;
    /*文字居中*/
  }
  .loginPart .inputbox{
    position:relative;
  }
  .loginPart .inputElement input{
    width: 100%;
    padding:10px 0;
    font-size:16px;
    color:rgb(15, 15, 15);
    letter-spacing: 1px;
    /*字符间的间距1px*/
    margin-bottom: 30px;
    border:none;
    border-bottom: 1px solid #fff;
    outline:none;
    /*outline用于绘制元素周围的线
    outline：none在这里用途是将输入框的边框的线条使其消失*/
    background: transparent;
    /*背景颜色为透明*/
  }

  .login{
    background: #AFBED1;
    width:100%;
    height:100%;
  }
  .el-button--danger {
    color: #FFF;
    background-color: #84beeb;
    border-color:#84beeb;
    border-right-color:#84beeb;
  }
  .el-button--danger:hover {
    background: #849AAF;
    border-color: #849AAF;
    color: #FFF;
}
.el-button--danger.is-disabled, .el-button--danger.is-disabled:active, .el-button--danger.is-disabled:focus, .el-button--danger.is-disabled:hover {
  background: #849AAF;
    border-color: #849AAF;
    color: #FFF;
}
</style>
